<template>
  <div class="home">
    <h1 class="title">常用工具</h1>
    <ul class="menus">
      <li v-for="menu in menus" shadow="always" :key="menu.active" @click="gotoRouter(menu)">
        <h3>{{ menu.title }}</h3>
        <p>{{ menu.describe }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const router = useRouter();
const data: any = reactive({
  menus: [
    {
      title: 'I18n多语言文件生成器',
      describe: 'I18n多语言文件生成器，用来快捷生成多语言文件',
      active: 'i18n',
      link: 'I18nGenerator'
    }
  ],
});
const {
  menus
} = toRefs(data);

// 跳转
const gotoRouter = (menu:any) => {
  console.log(menu)
  router.push({
    name: menu.link
  })
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);
</style>
